<template>
	<div>
		<div class="cms-title" @add="addTab = !addTab">
			<p>用户管理</p>
		</div>
		<div v-show="!configTab">
			<div v-show="!addTab">
				<actionBar></actionBar>
			</div>
			<div v-show="!addTab">
				<vTable></vTable>
			</div>
			<div v-show="addTab">
				<addMenu></addMenu>
			</div>
		</div>
		<div v-show="configTab">
			<roleTable></roleTable>

		</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	let Event = new Vue();
	let actionBar = {
		template: `
		<div class="action-bar">
		<el-input  placeholder="昵称" clearable prefix-icon="el-icon-search"></el-input>
		<el-button type="primary">搜索</el-button>
		<el-button type="success" @click="add">添加</el-button>
		<el-button type="danger">删除</el-button>
		</div>
	`,
		methods: {
			add: function() {
				Event.$emit('add');
			}
		}

	};
	let vTable = {
		template: `
		<div class="v-table">
		<el-table border stripe ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column prop="nickname" label="用户昵称	" width="100">
			</el-table-column>
			<el-table-column prop="email" label="email" width="180" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="status" label="状态" width="60" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间	" width="180" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="lastLoginTime" label="最后登录时间	" width="180" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					<el-button size="mini" type="warning" @click="configure">配置角色</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination background layout="prev, pager, next" :total="1000">
		</el-pagination>
	</div>
		
	`,
		data() {
			return {
				tableData3: [{
					"createNameId": "",
					"createTime": "2016-06-16 11:15",
					"email": "",
					"id": "1",
					"lastLoginTime": "2018-03-20 13:47",
					"lastUpdateNameId": "",
					"lastUpdateTime": "",
					"nickname": "admin",
					"phone": "",
					"pswd": "rpU29djpQPkMba0K881Jmg==",
					"realName": "",
					"status": "1",
					"type": "0"
				}, {
					"createNameId": "",
					"createTime": "2016-05-26 20:50",
					"email": "8446666@qq.com",
					"id": "11",
					"lastLoginTime": "2018-03-13 13:54",
					"lastUpdateNameId": "",
					"lastUpdateTime": "",
					"nickname": "root",
					"phone": "",
					"pswd": "HvkQfzu8yW4=",
					"realName": "",
					"status": "1",
					"type": "0"
				}, {
					"createNameId": "",
					"createTime": "2017-12-12 17:00",
					"email": "",
					"id": "940506509433856000",
					"lastLoginTime": "",
					"lastUpdateNameId": "",
					"lastUpdateTime": "",
					"nickname": "test",
					"phone": "",
					"pswd": "cTqdMfYrutM=",
					"realName": "",
					"status": "1",
					"type": "0"
				}]
			}
		},
		methods: {
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			},
			configure: function() {
				Event.$emit('config');
			}
		}
	};

	let addMenu = {
		template: `
		<div>
		<div class="add-box">
			<span class="add-title">上级菜单</span>
			<el-select v-model="value" placeholder="请选择">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
		</div>
		<div class="add-box">
			<span class="add-title">菜单类型</span>
			<el-select v-model="value" placeholder="请选择">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
		</div>
		<div class="add-box">
			<span class="add-title">菜单类型</span>
			<el-input v-model="input" placeholder="请输入内容"></el-input>
		</div>
		<div class="add-box">
			<span class="add-title">菜单地址</span>
			<el-input v-model="input" placeholder="请输入内容"></el-input>
		</div>
		<div>
			 <el-button type="primary" @click="add">保存</el-button>
			 <el-button type="info" @click="add">返回</el-button>
		</div>
	</div>
	`,
		data() {
			return {
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value: '',
				input: ''
			}
		},
		methods: {
			add: function() {
				Event.$emit('add');
			}

		}
	};
	let roleTable = {
		template: `
		<div class="v-table">
		<el-table border stripe ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column prop="name" label="角色名称" width="194">
				
			</el-table-column>
			<el-table-column prop="type" label="角色类型" width="260" show-overflow-tooltip>
			</el-table-column>
			
		
		</el-table>
		<div>
			 <el-button type="primary" @click="configure">保存</el-button>
			 <el-button type="info" @click="configure">返回</el-button>
		</div>
	</div>
		
	`,
		data() {
			return {
				tableData3: [{
					"id": "1",
					"name": "系统管理员",
					"type": "100004"
				}, {
					"id": "2",
					"name": "测试",
					"type": "1000011"
				}]
			}
		},
		methods: {
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			},
			configure: function() {
				Event.$emit('config');
			}
		}
	};

	export default {
		name: "Menu",
		components: {
			actionBar,
			vTable,
			addMenu,
			roleTable
		},
		data() {
			return {
				addTab: false,
				configTab: false
			}
		},
		mounted: function() {
			let that = this;
			Event.$on('add', function() {
				that.addTab = !that.addTab;
			});
			Event.$on('config',
				function() {
					that.configTab = !that.configTab;
				});
		}
	}
</script>

<style>
	.cms-title {
		padding: 8px 16px;
		background-color: #ecf8ff;
		border-radius: 4px;
		border-left: 5px solid #50bfff;
		margin-bottom: 20px;
	}
	
	.cms-title p {
		text-align: left;
		font-size: 24px;
	}
	
	.action-bar {
		text-align: left;
	}
	
	.action-bar .el-input {
		width: 240px;
		margin-right: 16px;
	}
	
	.v-table,
	.v-table .el-pagination {
		margin-top: 20px;
	}
	
	.v-table .cell {
		text-align: center;
	}
	
	.add-box {
		margin-bottom: 20px;
	}
	
	.add-box .el-input {
		width: 200px;
	}
	
	.add-title {
		color: #999;
		font-size: 14px;
		margin-right: 10px;
	}
</style>